<template>
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-xl" @tap.stop="" >
				<view class="cu-modal-slot">
					<view class="cu-modal-header">筛选</view>
					<view class="cu-modal-search">
						<view class="cu-modal-search-title">工程编码</view>
						<view>
              <u-input v-model="query.projectno" :type="type" :border="border" placeholder="请输入工程编码" />
						</view>
					</view>
					<view class="cu-modal-search">
						<view class="cu-modal-search-title">工程名称</view>
						<view>
              <u-input v-model="query.projectname" :type="type" :border="border" placeholder="请输入工程名称" />
						</view>
					</view>
          <view class="cu-modal-search">
						<view class="cu-modal-search-title">工程状态</view>
						<view class="flex flex-wrap justify-around">

              <view class="button" v-for="(item,index) in dictList" :key="index" @click="getStateValue(item.dictValue)">{{ item.dictLabel }}</view>

						</view>
					</view>
					<view class="cu-modal-footer flex">
						<!-- round -->
						<button class="cu-btn  lines-red lg " @click="hideModal">重置</button>
						<button class="cu-btn  bg-confirm lg margin-left " @click="confirmDialog">确定</button>

					</view>
				</view>
			</view>
		</view>
</template>
<script>
export default {
    name: 'customDialog',
    props: {
        modalName:{
            type: String,
            default: null
        },
        dictList:{
            type: Array,
            default: []
        },
    },
    data() {
        return{
          type: 'text',
				  border: true,
          query:{
            projectno:'',
            projectname:'',
           }
        }
    },
    created() {
        console.log(this.dictList);
    },
    methods: {
        hideModal() {
            this.query.projectno = ''
            this.query.projectname = ''
            this.projStatus = 0
            this.$emit('getModalName',{
              modalName: null,
              query: { 
                projectname: '',
                projStatus: 0,
                projectno: '',
              }
            })
            // 显示tabbar
            uni.showTabBar();
        },
        confirmDialog(){
            // 把query值传递给父组件，关闭弹窗
            // this.$emit('getQuery',this.query)
            if(!this.query.projStatus){
              this.query.projStatus = 0
            }
            this.$emit('getModalName',{
              modalName: null,
              // 显示tabbar
              query: this.query
            });
            // 显示tabbar
            uni.showTabBar();
        },
        getStateValue(item){
          this.query.projStatus = item;
        },
    }
}
</script>
<style scoped lang="scss">
.cu-modal-slot {
  margin: 42rpx 32rpx 20rpx 32rpx;
  height: 100vh;
  position: relative;
}
.cu-modal-header {
  font-size: 38rpx;
  color: #3d3d3d;
  line-height: 40rpx;
  text-align: left;
  font-weight: 500;
}
.button {
  font-size: 32rpx;
  color: #666666;
  line-height: 40rpx;
  padding: 12rpx 40rpx;
  margin-bottom: 20rpx;
  background: #f7f7f7;
  border-radius: 180rpx;
}
.button:hover {
  background: #3e97b0;
  color: #ffffff;
}
.cu-modal-search-title {
  margin: 32rpx 0rpx 20rpx 0rpx;
  text-align: left;
  font-size: 32rpx;
  color: #999999;
  line-height: 40rpx;
}
.cu-dialog {
  background: #ffffff;
}
.cu-modal-footer {
  position: absolute;
  bottom: 80rpx;
  width: 100%;
  .cu-btn {
    width: 50%;
  }
}
.bg-confirm {
  background: #3e97b0;
  color: #ffffff;
}
</style>